<script setup lang="ts">
import { iscollapse } from './collapse'
</script>

<template>
  <el-header>
    <!-- 切换图标 -->
    <el-icon @click="iscollapse = !iscollapse">
      <IEpExpand v-if="iscollapse" />
      <IEpFold v-else />
    </el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">promotion management</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>promotion list</el-breadcrumb-item>
      <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 下拉菜单 -->
    <el-dropdown>
      <span class="el-dropdown-link">
        <!-- 头像 -->
        <el-avatar
          :size="40"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <el-icon class="el-icon--right">
          <i-ep-arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人设置</el-dropdown-item>
          <el-dropdown-item>联系我们</el-dropdown-item>
          <el-dropdown-item>权限管理</el-dropdown-item>
          <el-dropdown-item disabled>Action 4</el-dropdown-item>
          <el-dropdown-item divided>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>

<style lang="scss" scoped>
.el-header {
  display: flex;
  background-color: #eee;
  align-items: center;
  .el-icon {
    margin-right: 20px;
  }
}
.el-dropdown {
  margin-left: auto;
}
</style>
